﻿<link href="/plugins/jquery.treeview.css" rel="stylesheet" type="text/css" />
<style>
    .ui-menu
    {
        width: 150px;
    }
    #menu
    {
        position: absolute;
        top: 0px;
        left: 50px;
        display: none;
    }
</style>
<script src="/plugins/jquery.treeview.js" type="text/javascript"></script>
<script src="/plugins/jquery.treeview.edit.js" type="text/javascript"></script>
<script type="text/javascript">
    var helper = new Helper();
    $(document).ready(function () {
        bindDocumentCompleted();

        $("#menu").menu({
        });
        $("#completeDocumentLink").click("contextmenu", function (event) {

            $("#menu").show();
            return false;
        });

    });
    function bindDocumentCompleted(_sort) {
        helper.GetAllCompletedDocumentByUser(function (alldocument) {
            $('#browser').html();
            $("#menu").hide();
            var allDocs = alldocument.AllDocument;
            var docDetail = jQuery.grep(allDocs, function (n, i) {
                return (n.Status === '50');
            });
            //helper.groupBy()
            getTreeviewApprovalMappingData(docDetail);
        }, _sort);
    }
    function getTreeviewApprovalMappingData(allDocs) {
        var treeviewHtml = $('#browser').html('');
        var htmlDocumentItem = '<li><a href="#" onclick="openDocumentCompleted(\'{0}\', \'{1}\');"><span class="file">{0}</span></a></li>';

        var groupYear = [];
        var groupItem = [];
        var groupDoctype = [];
        var groupCreateBy = [];
        $.each(allDocs, function (key, value) {
            var dateCreated = TimeStampToDate(value.Created);
            var itemDocumetn = {};
            itemDocumetn[dateCreated.getFullYear()] = htmlDocumentItem.format(value.DocID, value.Doctype);
            itemDocumetn['doctype'] = value.Doctype;
            itemDocumetn['UserName'] = value.UserName;
            groupItem.push(itemDocumetn);
            if (!CheckExitItemList(groupYear, dateCreated.getFullYear())) {
                groupYear.push(dateCreated.getFullYear());
            }
            if (!CheckExitItemList(groupDoctype, value.Doctype)) {
                groupDoctype.push(value.Doctype);
            }
            if (!CheckExitItemList(groupCreateBy, value.UserName)) {
                groupCreateBy.push(value.UserName);
            }
        });

        var htmlDocumentCreateBy = '<li><span class="folder">{0}</span><ul>{1}</ul></span>';
        var htmlDocumentCreateByComplete = '';
        $.each(groupCreateBy, function (createby, valuecreateby) {


            var htmlDocumentDoctypeComplete = '';
            $.each(groupDoctype, function (keyDoctype, valueDoctype) {
                var htmlDocumentDoctype = '<li><span class="folder">{0}</span><ul>{1}</ul></span>';
                var htmlDocumentYearComplete = '';
                $.each(groupYear, function (key, value) {
                    var htmlDocumentYear = '<li><span class="folder">{0}</span><ul> {1} </ul></li>';
                    var htmlDocumentItemComplete = '';
                    $.each(groupItem, function (keyItem, valueItem) {
                        if (valueItem.hasOwnProperty(value) && valueItem['doctype'] === valueDoctype && valueItem['UserName'] === valuecreateby) {
                            htmlDocumentItemComplete += valueItem[value];
                        }
                    });
                    htmlDocumentYearComplete += htmlDocumentYear.format(value, htmlDocumentItemComplete);
                });
                var doctypeDisplay = 'Customer';
                if (valueDoctype === '02') {
                    doctypeDisplay = 'Price Group';
                }
                htmlDocumentDoctypeComplete += htmlDocumentDoctype.format(doctypeDisplay, htmlDocumentYearComplete);
            });
            //alert(valuecreateby);
            htmlDocumentCreateByComplete += htmlDocumentCreateBy.format(valuecreateby, htmlDocumentDoctypeComplete);
        });
        //var complete = htmlDocumentYear.format(approver.display) + htmlSaleComplete + '</ul></li>';
        $('#browser').html(htmlDocumentCreateByComplete);

        $("#browser").treeview({ collapsed: true });


    }

    function CheckExitItemList(List, itemchecking) {
        var count = 0;
        $.each(List, function (key, value) {
            if (value === itemchecking) {
                count++;
            }
        });
        if (count > 0) {
            return true;
        }
        else {
            return false;
        }
    }
</script>
<ul id="browser" class="filetree treeview-famfamfam">
</ul>
<ul id="menu">
    <li><a onclick="bindDocumentCompleted('name');" href="#">เรียงตามชื่อ</a></li>
    <li><a onclick="bindDocumentCompleted('docid');" href="#">เรียงตามเลขที่เอกสาร</a></li>
    <li><a onclick="bindDocumentCompleted('year');" href="#">เรียงตามปี</a></li>
</ul>
<!--<ul id="browser" class="filetree treeview-famfamfam">
    <li><span class="folder">ราคาส่วนลดรายลูกค้า</span>
        <ul>
            <li><span class="folder">2012</span>
                <ul>
                    <li><span class="file">File 2.1.1</span></li>
                    <li><span class="file">File 2.1.2</span></li>
                </ul>
            </li>
            <li><span class="folder">2013</span>
                <ul>
                    <li><span class="file">Subfolder 2.1</span></li>
                    <li><span class="file">Subfolder 2.2</span></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><span class="folder">ราคาส่วนลดรายกลุ่มสินค้า</span>
        <ul>
            <li><span class="folder">2012</span>
                <ul>
                    <li><span class="file">File 2.1.1</span></li>
                    <li><span class="file">File 2.1.2</span></li>
                </ul>
            </li>
            <li><span class="folder">2013</span>
                <ul>
                    <li><span class="file">Subfolder 2.1</span></li>
                    <li><span class="file">Subfolder 2.2</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>-->
